<template>
  <div class="index">
    <Header></Header>
    <Search></Search>
    <Banner></Banner>
    <Advert></Advert>
    <List :listApi="listShangXin" ref="listShangXin"></List>
    <List :listApi="listPinTuan" ref="listPinTuan"></List>
    <List :listApi="listFuShi" ref="listFuShi"></List>
    <List :listApi="listXieZi" ref="listXieZi"></List>
    <List :listApi="listXieZi" ref="listXieZi1"></List>
    <List :listApi="listXieZi" ref="listXieZi2"></List>
    <List :listApi="listXieZi" ref="listXieZi3"></List>
    <Footer></Footer>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/Header.vue'// 头部导航
import Search from '@/components/Search.vue'// 搜索部分
import Banner from '@/components/Banner.vue'// 轮播图
import Advert from '@/components/Advert.vue'// 注意
import List from '@/components/List.vue'// 注意
import Footer from '@/components/Footer.vue'// 注意


export default {
  name: 'Index',
  data() {
    return {
      listShangXin: [
        {
          title: "今日上新",
          link: "javascript:void(0);",// 查看更多
          items: [
            {
              src: require("../assets/icon/shangxin/shangxin_1.jpg"),
              isDiscount: false,// 卷
              title: "宝宝外出车载便携尿壶",
              linePrice: 200,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/shangxin/shangxin_2.jpg"),
              isDiscount: false,// 卷
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 600,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/shangxin/shangxin_3.jpg"),
              isDiscount: false,// 卷
              title: "儿童电动牙刷",
              linePrice: 20,
              number: 80,
              isFirst: false
            },{
              src: require("../assets/icon/shangxin/shangxin_4.jpg"),
              isDiscount: false,// 卷
              title: "除湿袋6袋",
              linePrice: 20,
              number: 120,
              isFirst: false
            },{
              src: require("../assets/icon/shangxin/shangxin_5.jpg"),
              isDiscount: false,// 卷
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: false
            },
          ]
        }
      ],
      listPinTuan: [
        {
          title: "拼团开奖",
          link: "javascript:void(0);",// 查看更多
          items: [
            {
              src: require("../assets/icon/pintuan/pintuan_0.png"),
              isDiscount: false,// 卷
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: true
            },{
              src: require("../assets/icon/pintuan/pintuan_1.jpg"),
              isDiscount: false,// 卷
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_2.jpg"),
              isDiscount: false,// 卷
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_3.jpg"),
              isDiscount: false,// 卷
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_4.jpg"),
              isDiscount: false,// 卷
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_5.jpg"),
              isDiscount: true,// 卷
              isDiscountName: "卷",
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_6.jpg"),
              isDiscount: true,// 卷
              isDiscountName: "卷",
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_7.jpg"),
              isDiscount: false,// 卷
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_8.jpg"),
              isDiscount: false,// 卷
              title: "深沟球人本轴承6206",
              linePrice: 20,
              number: 60,
              isFirst: false
            },
          ]
        }
      ],
      listFuShi: [
        {
          title: "服饰服装",
          link: "javascript:void(0);",// 查看更多
          items: [
            {
              src: require("../assets/icon/fushi/fushi_0.png"),
              isDiscount: false,// 卷
              title: "",
              linePrice: 20,
              number: 60,
              isFirst: true
            },{
              src: require("../assets/icon/fushi/fushi_1.jpg"),
              isDiscount: false,// 卷
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_2.jpg"),
              isDiscount: false,// 卷
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_3.jpg"),
              isDiscount: false,// 卷
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_4.jpg"),
              isDiscount: false,// 卷
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_5.jpg"),
              isDiscount: false,// 卷
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_6.jpg"),
              isDiscount: false,// 卷
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_7.jpg"),
              isDiscount: false,// 卷
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_8.jpg"),
              isDiscount: false,// 卷
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_9.jpg"),
              isDiscount: true,// 卷
              isDiscountName: "下单有奖",
              title: "TB纯棉四杠条修身运动裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },
          ]
        }
      ],
      listXieZi: [
        {
          title: "鞋子箱包",
          link: "javascript:void(0);",// 查看更多
          items: [
            {
              src: require("../assets/icon/xiezi/xiezi_0.png"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: true
            },{
              src: require("../assets/icon/xiezi/xiezi_1.jpg"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_2.jpg"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_3.jpg"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_4.jpg"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_5.jpg"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_6.jpg"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_7.jpg"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_8.jpg"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_9.jpg"),
              isDiscount: true,// 卷
              isDiscountName: "下单有奖",
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },
          ]
        }
      ],
    }
  },
  mounted() {
    console.log(this.$refs.listShangXin.$el.offsetTop)
    console.log(this.$refs.listPinTuan.$el.offsetTop)
  },
  components: {
    Header,
    Search,
    Banner,
    Advert,
    List,
    Footer
  }
}
</script>
